Vorbereitung auf die Anzeigemodi von morgen

Für PWAs kann die Eigenschaft „display_override“ verwendet werden, um spezielle Anzeigemodi zu berücksichtigen.

Thomas Steiner

Ein Web-App-Manifest ist eine JSON-Datei, die dem Browser Informationen zu Ihrer Progressiven Web-App und dazu liefert, wie sie sich verhalten soll, wenn sie auf dem Computer oder Mobilgerät des Nutzers installiert wird. Über die Property display können Sie anpassen, welche Browseroberfläche beim Starten Ihrer App angezeigt wird. So können Sie beispielsweise die Adressleiste und den Browser-Chrome ausblenden. Spiele können sogar im Vollbildmodus gestartet werden. Zur Wiederholung: Unten sind die Anzeigemodi aufgeführt, die zum Zeitpunkt der Erstellung dieses Artikels verfügbar waren.

Attribut Verwendung
fullscreen Die Webanwendung wird ohne Browser-Benutzeroberfläche geöffnet und nimmt den gesamten verfügbaren Displaybereich ein.
standalone Die Web-App wird so geöffnet, dass sie wie eine eigenständige App aussieht. Die App wird in einem eigenen Fenster ausgeführt, getrennt vom Browser, und standardmäßige Browser-UI-Elemente wie die URL-Leiste werden ausgeblendet.
minimal-ui Dieser Modus ähnelt standalone, bietet Nutzern aber eine minimale Anzahl von UI-Elementen zur Navigationssteuerung (z. B. Zurück und Aktualisieren).
browser Standardbrowser

Diese Darstellungsmodi folgen einer genau definierten Fallback-Kette ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Wenn ein Browser einen bestimmten Modus nicht unterstützt, wird der nächste Darstellungsmodus in der Kette verwendet.

Nachteile des display-Attributs

Das Problem mit dieser starren Abfolge von Fallbacks besteht aus drei Teilen:

  • Wenn "minimal-ui" von einem Entwickler angefordert wird, der Browser aber "minimal-ui" nicht unterstützt, wird er zum Anzeigemodus "browser" zurückgezwungen.
  • Entwickler haben keine Möglichkeit, browserübergreifende Unterschiede zu berücksichtigen, z. B. ob der Browser im Fenster für den "standalone"-Modus eine Zurück-Schaltfläche enthält oder nicht.
  • Aufgrund des aktuellen Verhaltens ist es nicht möglich, neue Darstellungsmodi auf abwärtskompatible Weise einzuführen, da explorative Datenanalysen wie der Tab-Anwendungsmodus keinen natürlichen Platz in der Fallback-Kette haben.

Die display_override-Property

Diese Probleme werden durch die Property display_override gelöst, die vom Browser vor der Property display berücksichtigt wird. Der Wert ist eine Sequenz von Strings, die in der Reihenfolge betrachtet werden, und der erste unterstützte Anzeigemodus wird angewendet. Wenn keine unterstützt werden, greift der Browser auf die Auswertung des Felds display zurück.

Im folgenden Beispiel würde die Fallback-Kette für den Anzeigemodus so aussehen: Die Details zu "window-controls-overlay" fallen nicht in den Geltungsbereich dieses Artikels.

  1. "window-controls-overlay" (Sehen Sie sich zuerst display_override an.)
  2. "minimal-ui"
  3. "standalone" (Wenn display_override aufgebraucht ist, wird display ausgewertet.)
  4. "minimal-ui" (Verwenden Sie abschließend die display-Fallback-Kette.)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Um für Abwärtskompatibilität zu sorgen, ist jeder zukünftige Anzeigemodus nur als Wert für display_override zulässig, nicht für display. In Browsern, die display_override nicht unterstützen, wird auf die Property display zurückgegriffen und display_override als unbekannte Manifest-Property der Webanwendung ignoriert.

Danksagung

Das Attribut display_override wurde von Daniel Murphy formalisiert.